<template>
  <div class="sidebar" style="left:0px">
    <!-- <el-tree :data='data' :props='defaultProps' @node-click='handleNodeClick'></el-tree> -->
    <el-menu
      :default-active="this.$router.path"
      class="el-menu-vertical-demo"
      @select="menuSelected"
      background-color="#F0F6F6"
      text-color="#3C3F41"
      active-text-color="black"
      :collapse="isCollapse"
      router
      @open="handleOpen"
      @close="handleClose"
    >
      <!--加上router 才能实现跳转-->
      <nav-menu :navMenus="leftMenus.childs"></nav-menu>
    </el-menu>
  </div>
</template>
<script>
import menu from "../data/menu";
import leftMenus from "data/leftMenus";
import navMenu from "./navMenu";

export default {
  name: "sidebar",
  components: {
    navMenu
  },
  data() {
    return {
      data: menu,
      leftMenus,
      defaultProps: {
        children: "children",
        label: "label"
      },
      isCollapse: false
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    handleNodeClick(data) {
      this.$router.push({ path: data.url });
    },
    handleOpen() {},
    handleClose() {},
    menuSelected(val) {
      // console.log(val)
    },
    init() {
      this.axios
        .get("/user/menu")
        .then(res => {
          console.log(res);
          const data = res.data;
          if (
            data.code == 200 &&
            typeof data.data === "object" &&
            data.data.menu
          ) {
            console.log(data.data.menu);
            console.log(JSON.parse(data.data.menu));
            this.leftMenus = {
              entity: null,
              childs: JSON.parse(data.data.menu)
            };
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang="less">
@import url("./../assets/less/color.less");
.sidebar {
  position: fixed;
  left: 0;
  top: 60px;
  bottom: 0;
  width: 220px;
  padding: 0;
  /* max-height: 800px; */
  /* overflow: scroll; */
  background: @sideBar;
  border-right: 1px solid #ccc;
  -webkit-overflow-scrolling: touch;
  -webkit-overflow-scrolling: blackberry-touch;
}
</style>
